<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>


    <script type="text/babel">

        class Count extends React.Component {
            state = {p:10}

            countGo = () => {
                //手动更新
                this.setState({
                    p: 20
                })
            }
            countGo2= () => {
                //手动更新
                this.state.p = 20
                this.forceUpdate()
            }


            static getDerivedStateFromProps(){
                console.log('Count------------------getDerivedStateFromProps')
            }

            //03 更新优化 ： 外界传递props
            shouldComponentUpdate(nextProps, nextState) {
                console.log('Count------------------shouldComponentUpdate')

                //性能优化
                // props  
                // this.props 和 nextProps 比较
                // if (this.props.m === nextProps.m) {
                //     return false
                // }

                // Returned undefined instead of a boolean value. Make sure to return true or false.
                // true 放行 更新； false 拦截 不更新；
                return true
            }

            render() {
                console.log('Count------------------render')
                return (
                    <div>
                        <button onClick={this.countGo}>countGo</button>
                        <button onClick={this.countGo2}>forceGo</button>
                        <div>Count-m ：{this.props.m}</div>
                        <div>Count-p ：{this.state.p}</div>
                    </div>
                )
            }
            getSnapshotBeforeUpdate(prevProps, prevState){
                console.log('Count------------------getSnapshotBeforeUpate')
                return true
            }

            componentDidMount(){
                console.log('Count------------------componentDidMount')
            }


            componentDidUpdate(){
                console.log('Count------------------componentDidUpdate')
            }

            componentWillUnmount(){
                console.log('Count------------------componentWillUnmount')
            }
        }


        class App extends React.Component {

            constructor(props) {
                console.log('App-----------------constructor')
                super(props)  
                this.state = { m: 20 }
            }


            // 02 更新方式 事件
            go = () => {
                //手动更新
                this.setState({
                    m: 13
                })
            }

           static getDerivedStateFromProps(){
                console.log('Count------------------getDerivedStateFromProps')
            }

            shouldComponentUpdate(nextProps, nextState) {
                console.log('App------------------shouldComponentUpdate')

                //性能优化
                // state 
                // this.state 和 nextState 比较
                if (this.state.m === nextState.m) {
                    return false
                }
                // if (this.state.m === nextState.m&&this.props.n=== nextProps.n) {
                //     return false
                // }

                return true
            }


            //03  更新 ： render 可以执行多次
            render() {
                console.log('App------------------render')
                return (
                    <div>
                        <button onClick={this.go}>go</button>
                        <button onClick={()=>{
                            ReactDOM.unmountComponentAtNode(document.getElementById('app'))
                        }}>unmount</button>
                        <div>A-m ：{this.state.m}</div>
                        <Count m={this.state.m} />
                    </div>
                )
            }

            
            componentDidMount() {
                console.log('App------------------componentDidMount')
            }


            // 组件卸载：
            // 场景： 隐藏显示 页面跳转 手动移除..
            // 资源释放 清理工作
            // 卸载流程 ：  父组件开始卸载 =>陆续递归查询子组件 卸载子组件=>  父组件完成卸载
            componentWillUnmount(){
                console.log('App------------------componentWillUnmount')
            }



        }


  




        ReactDOM.render(<App  />, document.getElementById('app'))
    </script>
</body>

</html>